﻿<Card Class="account-profile-root">
    <CardContent>
        <div class="account-profile-details">
            <div>
                <Typography
                    GutterBottom
                    Variant="@TypographyVariant.H2">
                    John Doe
                </Typography>
                <Typography
                    Class="account-profile-location-text"
                    Color="@Color.TextSecondary"
                    Variant="@TypographyVariant.Body1">
                    @User.City, @User.Country
                </Typography>
                <Typography
                    Class="account-profile-date-text"
                    Color="@Color.TextSecondary"
                    Variant="@TypographyVariant.Body1">
                    @DateTime.Now.ToString("hh:mm A") (@User.Timezone)
                </Typography>
            </div>
            <Avatar
                Class="account-profile-avatar"
                Src="@User.Avatar" />
        </div>
        <div class="account-profile-progress">
            <Typography Variant="@TypographyVariant.Body1">Profile Completeness: 70%</Typography>
            <LinearProgress
                Value="70"
                Variant="@LinearProgressVariant.Determinate" />
        </div>
    </CardContent>
    <Divider />
    <CardActions>
    <Button
        Class="account-profile-upload-button"
        Color="@Color.Primary"
        Variant="@ButtonVariant.Text">
        Upload picture
    </Button>
        <Button Variant="@ButtonVariant.Text">Remove picture</Button>
    </CardActions>
</Card>

@code
{
    private (string Name, string City, string Country, string Timezone, string Avatar) User = (
        Name: "Shen Zhi",
        City: "Los Angeles",
        Country: "USA",
        Timezone: "GTM-7",
        Avatar: "./_content/IoTSharp.App.View/images/avatars/avatar_11.png"
    );
}
